<template>
  <div class="container">
    <!-- 顶部自定义 -->
    <title-mobile :titleShow="true" :gradient="false">
      <div class="title-mobile-container" v-show="messageType==1">
        <div class="head" @click="toUserInfo(receiveUser.id)">
          <el-avatar :size="34" :src="receiveUser.headImage" />
        </div>
        <div class="username" @click="toUserInfo(receiveUser.id)">{{receiveUser.nickName}}</div>
      </div>
      <div v-show="messageType!=1">
        <div class="username title-mobile-container">{{receiveUser.nickName}}</div>
      </div>
    </title-mobile>
    <div class="message-box">
      <div class="message-item" v-for="(item,index) in messageItemList" :key="item.id">
        <div class="item-left" v-show="userId==item.receiveId">
          <div class="left-time"
            v-show="(index+1)<messageItemList.length?dateSubUtil(messageItemList[index].createTime,messageItemList[index+1].createTime):dateSubUtil(messageItemList[index].createTime,new Date())">
            {{dateFormatUtil(item.createTime)}}</div>
          <div class="left-head">
            <el-avatar :size="50" :src="userId==item.receiveId?item.sendHeadImage:''"></el-avatar>
          </div>
          <div class="left-content">
            <el-card>
              {{item.content}}
            </el-card>
            <div class="unread">
              <el-tag type="info" v-show="item.state==0">未读</el-tag>
            </div>
            <div class="read">
              <el-tag type="success" v-show="item.state==1">已读</el-tag>
            </div>
          </div>
        </div>
        <div class="item-right" v-show="userId!=item.receiveId">
          <div class="right-time"
            v-show="(index+1)<messageItemList.length?dateSubUtil(messageItemList[index].createTime,messageItemList[index+1].createTime):dateSubUtil(messageItemList[index].createTime,new Date())">
            {{dateFormatUtil(item.createTime)}}</div>
          <div class="right-head">
            <el-avatar :size="50" :src="userId!=item.receiveId?item.sendHeadImage:''"></el-avatar>
          </div>
          <div class="right-content">
            <el-card>
              {{item.content}}
            </el-card>
            <div class="unread">
              <el-tag type="info" v-show="item.state==0">未读</el-tag>
            </div>
            <div class="read">
              <el-tag type="success" v-show="item.state==1">已读</el-tag>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box-buttom"></div>
    <div class="sendbar" v-show="messageType==1">
      <div class="sendbar-input">
        <el-input v-model="sendContent" size="large" maxlength="255">
          <template #prepend>
            <el-select v-model="sendContent" placeholder="快捷" style="width: 100px">
              <el-option label="" value="" />
              <el-option label="你好呀！" value="你好呀！" />
              <el-option label="交个朋友！" value="交个朋友！" />
              <el-option label="认识你很高兴！" value="认识你很高兴！" />
            </el-select>
          </template>
          <template #append>
            <div @click="sendMessage">发送</div>
          </template>
        </el-input>
      </div>
    </div>
  </div>
</template>

<script>
import { userId, dateFormat, dateSub } from '../../utils/index';
import { ElMessage } from 'element-plus';
export default {
  name: 'GMessageInfo',
  data () {
    return {
      messageItemList: [],
      updateFlag: true,
      receiveId: "",
      groupId: "",
      messageClock: null,
      sendContent: "",
      userId,
      receiveUser: {},
      messageType: 1,
    }
  },
  mounted () {
    this.groupId = this.$route.params.groupId;
    this.receiveId = this.$route.params.receiveId;
    this.messageType = this.$route.params.type;
    this.getMessageItemList();
    this.getReceiveUser();
    this.messageClock = setInterval(this.getMessageItemList, 1000);
    this.readMessage();
    setTimeout(function () {
      window.scrollTo(0, document.body.scrollHeight);
    }, 1000)
  },
  // //渲染完滚动到底部
  // watch: {
  //   messageItemList: function () {
  //     this.$nextTick(function () {
  //       window.scrollTo(0, document.body.scrollHeight);
  //     })
  //   }
  // },
  unmounted () {
    clearInterval(this.messageClock);
  },
  methods: {
    getMessageItemList () {
      this.readMessage();
      this.$axios.get("/message/item/" + this.groupId).then(res => {
        if (res.flag) {
          this.messageItemList = res.data;
        }
      })
    },
    sendMessage () {
      if (this.sendContent.trim() == "" || this.sendContent.length > 225) {
        ElMessage({
          message: "内容格式错误,请输入1-255个字符",
          grouping: true,
          type: 'error',
          duration: 2000,
        })
        return;
      }
      this.$axios.post("/message", {
        "type": "1",
        "receiveId": this.receiveId,
        "content": this.sendContent,
      }).then(res => {
        if (res.flag) {
          ElMessage({
            message: res.msg,
            grouping: true,
            type: 'success',
            duration: 2000,
          })
          //如果是从用户信息页面跳转过来的会没有分组 重新刷新
          if (this.groupId == "1000") {
            this.$router.replace("/messageinfo/" + res.data.groupId + "/" + this.receiveId + "/1");
            this.groupId = res.data.groupId;
          }
          this.getMessageItemList();
          window.scrollTo(0, document.body.scrollHeight + 100);
        }
      })
    },
    getReceiveUser () {
      if (this.messageType == 0) {
        this.receiveUser.nickName = "消息";
        return;
      }
      this.$axios.get("/user/uservo/" + this.receiveId).then(res => {
        if (res.flag) {
          this.receiveUser = res.data
        }
      })
    },
    //读取消息 已读状态
    readMessage () {
      this.$axios.put("/message/read/" + this.groupId).then(res => {
        if (res.flag) {
          console.log("读取消息", res.data);
        }
      })
    },
    dateFormatUtil (date) {
      return dateFormat(date, 5);
    },
    dateSubUtil (oldTime, newTime) {
      return dateSub(oldTime, newTime, 2);
    },
    toUserInfo (userId) {
      this.$router.push('/user/info/' + userId);
    }
  }
}
</script>

<style scoped>
.container {
  word-wrap: break-word;
}
.title-mobile-container {
  width: 100%;
  height: 40px;

  line-height: 40px;
}
.title-mobile-container > .head {
  float: left;
  margin-top: 3px;
  margin-left: 40px;
}
.title-mobile-container > .username {
  width: 150px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-align: left;
  margin-left: 10px;
  font-size: 18px;
  float: left;
}
.message-box {
  width: 100%;
  float: left;
}
.message-item {
  width: 100%;
}
.item-left {
  float: left;
  margin-top: 15px;
  width: 100%;
}
.left-time {
  width: 100%;
  float: left;
  text-align: center;
}
.left-head {
  width: 70px;
  text-align: center;
  float: left;
}
.left-content {
  max-width: calc(100% - 140px);
  float: left;
}
.left-content > .unread,
.left-content > .read {
  float: right;
}

.item-right {
  float: right;
  margin-top: 15px;
  width: 100%;
}
.right-time {
  width: 100%;
  float: right;
  text-align: center;
}
.right-head {
  width: 70px;
  text-align: center;
  float: right;
}
.right-content {
  max-width: calc(100% - 140px);
  float: right;
}
.right-content > .unread,
.right-content > .read {
  float: left;
}

.sendbar {
  width: 100%;
  position: fixed;
  bottom: 0;
  height: 60px;
  z-index: 10;
  background-color: var(--primary);
}
.sendbar-input {
  width: calc(100% - 20px);
  line-height: 60px;
  float: right;
  margin-right: 10px;
}
.box-buttom {
  float: left;
  width: 100%;
  height: 150px;
}
</style>